<template>
  <div class="login">
    <Header></Header>
    <div class="box">
      <div class="login_form">
        <div class="form">
          <div class="head">
            <span :class="tabType == 'yzm' ? 'tab_active' : ''" @click="changeTab('username')">手机号密码登录</span>
            <span :class="tabType == 'username' ? 'tab_active' : ''" @click="changeTab('yzm')">验证码登录</span>
          </div>
          <el-form :model="accountForm" :rules="accountRules" ref="accountForm"  class="accountForm" v-if="tabType == 'username'">
            <el-form-item prop="username">
              <el-input v-model="accountForm.mobile" placeholder="手机号"  prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="accountForm.password" placeholder="密码"  prefix-icon="el-icon-lock" @keyup.enter.native="login" show-password></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm"  class="phoneForm" v-if="tabType == 'yzm'">
            <el-form-item prop="mobile">
              <el-input v-model="phoneForm.mobile" placeholder="请输入手机号"  prefix-icon="el-icon-mobile-phone"></el-input>
            </el-form-item>
            <el-form-item prop="msgCode" class="time">
              <el-input v-model="phoneForm.msgCode" placeholder="验证码" prefix-icon="el-icon-tickets" @keyup.enter.native="login"></el-input>
              <span v-show="!show" class="count" style="color:red">{{count}} s</span>
              <el-button class="yzm" type="primary" plain @click="getCode" v-show="show">获取验证码</el-button>
            </el-form-item>
          </el-form>
          <p @click="openModle()">没有账号？立即注册</p>
          <div class="btns">
            <el-button type="primary" @click="login">立即登录</el-button>
            <!-- <el-button type="primary" @click="login('phoneForm')" v-else="tabType == 'yzm'">立即登录</el-button> -->
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      title="账号注册"
      :visible.sync="drawer"
      >
      <div class="regBox">
        <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="100px" class="regForm">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="regForm.companyName" placeholder="请输入公司名称" prefix-icon="el-icon-office-building"></el-input>
          </el-form-item>
          <el-form-item label="个人姓名" prop="realname">
            <el-input v-model="regForm.realname" placeholder="请输入个人姓名" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="regForm.mobile" placeholder="请输入手机号"  prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input  v-model="regForm.pass" placeholder="请输入密码" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input  v-model="regForm.checkPass" placeholder="请再次输入密码" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="regForm.email" placeholder="请输入邮箱地址"  prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
        </el-form>
          
        <div class="btns">
          <el-button type="text" class="zcxz">注册需知</el-button>
          <el-button type="primary" @click="register('regForm')">立即注册</el-button>
        </div>
      </div>
      
    </el-drawer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import axios from "axios";
export default {
  name:'login',
  components: {
    Header
  },
  data () {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.regForm.checkPass !== '') {
            this.$refs.regForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        }else if(value){
          callback();
        }
      };
    return {
      show:true,
      count:'',    
      timer:null,
      tabType:'username',
      code:"",
      realname:null,
      rules: {
          mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
          password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
          msgCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],

        },
      accountForm:{
        mobile:null,
        password:null
      },
      accountRules:{
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      phoneForm:{
        mobile:null,
        msgCode:null
      },
      phoneRules:{
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度应为11位', trigger: 'blur' }
        ],
        msgCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      },
      drawer:false,
      regForm:{
        username:'',
        email:'',
        pass:'',
        checkPass: '',
        companyName:'',
        realname:''
      },
      regRules:{
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },

        ],
        companyName:[
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        realname:[
          { required: true, message: '请输入个人姓名', trigger: 'blur' },
        ],
        pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  created () {

  },
  methods: {
    changeTab(type){
      this.tabType = type
      this.phoneForm.mobile = ''
      this.phoneForm.msgCode = ''
      this.accountForm.mobile = ''
      this.accountForm.password = ''
    },
    openModle(){
      this.drawer = true
    },
    login(){
      if(this.accountForm.mobile == '' ||this.accountForm.mobile ==null)
      {
          let params = {
        username:this.phoneForm.mobile,
        code:this.phoneForm.msgCode,
        password:this.accountForm.password
      }
        axios
        .post("http://47.108.58.38/tk/login/in",params)
        .then(res =>{
          // console.log(res.data.data.user.realname)
          if (res.data.statusCode == "00000") {
            this.$message.success(res.data.message)
            localStorage.setItem('username',this.phoneForm.mobile)
            localStorage.setItem('realname',res.data.data.user.realname)
            localStorage.setItem('token',res.data.data.token)
          setTimeout(()=>{
            this.$router.push('/home')
          },1000)
        } else {
          this.$message.error(res.data.message)
          return false;
        }
        })
        .catch((err) => {
          this.$message.err(err.data,message)
        }); 
      }
      else{
        let params = {
        username:this.accountForm.mobile,
        code:this.phoneForm.msgCode,
        password:this.accountForm.password
      }
        axios
        .post("http://47.108.58.38/tk/login/in",params)
        .then(res =>{
          // console.log(res.data.data.user.realname)
          if (res.data.statusCode == "00000") {
            this.$message.success(res.data.message)
            localStorage.setItem('username',this.accountForm.mobile)
            localStorage.setItem('realname',res.data.data.user.realname)
            localStorage.setItem('token',res.data.data.token)
          setTimeout(()=>{
            this.$router.push('/home')
          },1000)
        } else {
          this.$message.error(res.data.message)
          return false;
        }
        })
        .catch((err) => {
          alert("登陆失败，请重试！")
        }); 
      }
    },
    //获取验证码
    getCode(){
       if(this.phoneForm.mobile != null && this.phoneForm.mobile != ''){
          const TIME_COUNT = 60;
                if (!this.timer) { 
                this.count = TIME_COUNT;
                 this.show = false; 
                 this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) { 
                   this.count--;  }
                    else {  
                    this.show = true;  
                    clearInterval(this.timer);  
                    this.timer = null;  } }, 
          1000) }

        let params= {
          username:this.phoneForm.mobile
        }
        axios
        .post("http://47.108.58.38/tk/login/get_code",params)
        .then(res =>{
            if(res.data.statusCode == "00000"){
            this.$message.success(res.data.message)
            }else{
              this.$message.error(res.data.message);
            }
        })
        .catch(err =>{
           this.$message.err(err.data.message) 
        })
       }else{
         this.$message.error("请输入手机号！")
        //  const TIME_COUNT = 60;
        //         if (!this.timer) { 
        //         this.count = TIME_COUNT;
        //          this.show = false; 
        //          this.timer = setInterval(() => {
        //           if (this.count > 0 && this.count <= TIME_COUNT) { 
        //            this.count--;  }
        //             else {  
        //             this.show = true;  
        //             clearInterval(this.timer);  
        //             this.timer = null;  } }, 
        //   1000) }
       }
    },
    //注册提交按钮
    register(){ 
     let params ={
        username:this.regForm.mobile,
        realname:this.regForm.realname,
        companyName:this.regForm.companyName,
        password:this.regForm.checkPass,
        email:this.regForm.email,
      }
      axios
      .post("http://47.108.58.38/tk/user/add",params)
      .then(res =>{
        if(res.data.statusCode == "00000"){
              this.$message.success(res.data.message)
        }else{
          this.$message.error(res.data.message)
        }
        this.drawer = false
        this.regForm = []
      })
      .catch(err =>{
        this.$message.console.error(res.data.message)
      })
    },
  }
}
</script>

<style scoped lang="less">
@media screen and(max-width:1800px) and (min-width:800px){
.login{
  width: 100%;
  height: 100vh;
  background: url("../../assets/login_bg.png") no-repeat;
    background-size: 100% 100%;
  .box{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    
    .login_form{
      border-radius: 5px;
      background: rgba(226,242,255,.5);
      width: 380px;
      height: 300px;
      padding: 15px;
      margin-right: 200px;
      margin-top: 150px;
      .form{
        background: #fff;
        border-radius: 5px;
        height: 300px;
        .head{
          width: 100%;
          height: 50px;
          display: flex;
          border-radius: 5px 5px 0 0;
          span{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409eff;
            font-size:14px;
            cursor: pointer;
          }
          span:nth-child(1){
            border-radius: 5px 0 0 0;
          }
          span:nth-child(2){
            border-radius: 0 5px 0 0;
          }
          .tab_active{
            color: #fff;
            background: #409eff;
          }
        }
        
        .yzm{
          margin-left: 20px;
        }
        .count{
          margin-left: 20px;
          width: 112px;
          height: 40px;
        }
        .accountForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
          }
        }
        .phoneForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
            display: flex;
            align-items: center;
            /deep/ .el-input:nth-child(2){
              width: 60%;
            }
            /deep/ .el-button{
              margin-left: 25px;
            }
          }
        }
        p{
          color: #409eff;
          font-size: 14px;
          padding: 0 20px;
          cursor: pointer;
          width: 130px;
          margin-top: 30px;
        }
        .btns{
          padding: 0 20px;
          margin-top: 10px;
          /deep/ .el-button{
            width: 100%;
          };
          justify-content: space-around;
        }
      }
    }
  }
  .regBox{
    width: 80%;
    .regForm{
      width: 100%;
      /deep/ .el-form-item__content{
        display: flex;
        /deep/ .el-input:nth-child(2){
          width: 60%;
        }
        /deep/ .el-button{
          margin-left: 25px;
        }
      }
      
    }
    .btns{
      margin-left: 100px;
      /deep/ .el-button--primary{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .zcxz{
      margin-left: 40%;
    }
  }
  // .time{
  //   display: flex;
  //   justify-content: center;    
  //   }
  }
}
@media screen and(max-width: 800px) and (min-width: 400px){
   .login{
  width: 100%;
  height: 100vh;
  background: url("../../assets/login_bg.png") no-repeat;
  background-size: 100% 100%;
  /deep/ .el-drawer.rtl{
    width:60% !important;
}
  .box{
    width: 100%;
    // display: flex;
    // justify-content: flex-end;
    
    .login_form{
      // border-radius: 5px;
      // background: rgba(226,242,255,.5);
      // width: 380px;
      // height: 300px;
      // padding: 15px;
      // margin-right: 200px;
      margin-top: 50px;
      .form{
        background: #fff;
        border-radius: 5px;
        height: 300px;
        .head{
          width: 100%;
          height: 50px;
          display: flex;
          border-radius: 5px 5px 0 0;
          span{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409eff;
            font-size:14px;
            cursor: pointer;
          }
          span:nth-child(1){
            border-radius: 5px 0 0 0;
          }
          span:nth-child(2){
            border-radius: 0 5px 0 0;
          }
          .tab_active{
            color: #fff;
            background: #409eff;
          }
        }
        
        .yzm{
          margin-left: 20px;
        }
        .count{
          margin-left: 20px;
          width: 112px;
          height: 40px;
        }
        .accountForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
          }
        }
        .phoneForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
            display: flex;
            align-items: center;
            /deep/ .el-input:nth-child(2){
              width: 60%;
            }
            /deep/ .el-button{
              margin-left: 25px;
            }
          }
        }
        p{
          color: #409eff;
          font-size: 14px;
          padding: 0 20px;
          cursor: pointer;
          width: 130px;
          margin-top: 30px;
        }
        .btns{
          padding: 0 20px;
          margin-top: 10px;
          /deep/ .el-button{
            width: 100%;
          };
          justify-content: space-around;
        }
      }
    }
  }
  .regBox{
    width: 80%;
    .regForm{
      width: 100%;
      /deep/ .el-form-item__content{
        display: flex;
        /deep/ .el-input:nth-child(2){
          width: 60%;
        }
        /deep/ .el-button{
          margin-left: 25px;
        }
      }
      
    }
    .btns{
      margin-left: 100px;
      /deep/ .el-button--primary{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .zcxz{
      margin-left: 40%;
    }
  }
  // .time{
  //   display: flex;
  //   justify-content: center;    
  //   }
  }
}
@media screen and(max-width: 400px) and (min-width: 350px){
  .login{
  width: 100%;
  height: 100vh;
  background: url("../../assets/login_bg.png") no-repeat;
  background-size: 100% 100%;
  /deep/ .el-drawer.rtl{
    width:70% !important;
}
  .box{
    width: 100%;
    // display: flex;
    // justify-content: flex-end;
    
    .login_form{
      // border-radius: 5px;
      // background: rgba(226,242,255,.5);
      // width: 380px;
      // height: 300px;
      // padding: 15px;
      // margin-right: 200px;
      margin-top: 50px;
      .form{
        background: #fff;
        border-radius: 5px;
        height: 300px;
        .head{
          width: 100%;
          height: 50px;
          display: flex;
          border-radius: 5px 5px 0 0;
          span{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409eff;
            font-size:14px;
            cursor: pointer;
          }
          span:nth-child(1){
            border-radius: 5px 0 0 0;
          }
          span:nth-child(2){
            border-radius: 0 5px 0 0;
          }
          .tab_active{
            color: #fff;
            background: #409eff;
          }
        }
        
        .yzm{
          margin-left: 20px;
        }
        .count{
          margin-left: 20px;
          width: 112px;
          height: 40px;
        }
        .accountForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
          }
        }
        .phoneForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
            display: flex;
            align-items: center;
            /deep/ .el-input:nth-child(2){
              width: 60%;
            }
            /deep/ .el-button{
              margin-left: 25px;
            }
          }
        }
        p{
          color: #409eff;
          font-size: 14px;
          padding: 0 20px;
          cursor: pointer;
          width: 130px;
          margin-top: 30px;
        }
        .btns{
          padding: 0 20px;
          margin-top: 10px;
          /deep/ .el-button{
            width: 100%;
          };
          justify-content: space-around;
        }
      }
    }
  }
  .regBox{
    width: 80%;
    .regForm{
      width: 100%;
      /deep/ .el-form-item__content{
        display: flex;
        /deep/ .el-input:nth-child(2){
          width: 60%;
        }
        /deep/ .el-button{
          margin-left: 25px;
        }
      }
      
    }
    .btns{
      margin-left: 100px;
      /deep/ .el-button--primary{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .zcxz{
      margin-left: 40%;
    }
  }
  // .time{
  //   display: flex;
  //   justify-content: center;    
  //   }
  }

}
@media screen and(max-width: 350px){
  .login{
  width: 100%;
  height: 100vh;
  background: url("../../assets/login_bg.png") no-repeat;
  background-size: 100% 100%;
  /deep/ .el-drawer.rtl{
    width:80% !important;
}
  .box{
    width: 100%;
    // display: flex;
    // justify-content: flex-end;
    
    .login_form{
      // border-radius: 5px;
      // background: rgba(226,242,255,.5);
      // width: 380px;
      // height: 300px;
      // padding: 15px;
      // margin-right: 200px;
      margin-top: 50px;
      .form{
        background: #fff;
        border-radius: 5px;
        height: 300px;
        .head{
          width: 100%;
          height: 50px;
          display: flex;
          border-radius: 5px 5px 0 0;
          span{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409eff;
            font-size:14px;
            cursor: pointer;
          }
          span:nth-child(1){
            border-radius: 5px 0 0 0;
          }
          span:nth-child(2){
            border-radius: 0 5px 0 0;
          }
          .tab_active{
            color: #fff;
            background: #409eff;
          }
        }
        
        .yzm{
          margin-left: 20px;
        }
        .count{
          margin-left: 20px;
          width: 112px;
          height: 40px;
        }
        .accountForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
          }
        }
        .phoneForm{
          padding: 20px 20px 0 20px;
          /deep/ .el-form-item__content{
            margin-left: 0 !important;
            display: flex;
            align-items: center;
            /deep/ .el-input:nth-child(2){
              width: 60%;
            }
            /deep/ .el-button{
              margin-left: 25px;
            }
          }
        }
        p{
          color: #409eff;
          font-size: 14px;
          padding: 0 20px;
          cursor: pointer;
          width: 130px;
          margin-top: 30px;
        }
        .btns{
          padding: 0 20px;
          margin-top: 10px;
          /deep/ .el-button{
            width: 100%;
          };
          justify-content: space-around;
        }
      }
    }
  }
  .regBox{
    width: 80%;
    .regForm{
      width: 100%;
      /deep/ .el-form-item__content{
        display: flex;
        /deep/ .el-input:nth-child(2){
          width: 60%;
        }
        /deep/ .el-button{
          margin-left: 25px;
        }
      }
      
    }
    .btns{
      margin-left: 100px;
      /deep/ .el-button--primary{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .zcxz{
      margin-left: 40%;
    }
  }
  // .time{
  //   display: flex;
  //   justify-content: center;    
  //   }
  }
}
</style>
